<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demom</title>
	<script src="jquery-3.4.1.min.js"></script>
	<script src="jquery-ui.min.js"></script>
<style type="text/css">

	  div{
        width: 100px;height: 100px;
    }
    #div1{
       background-color : hotpink;
    }

    #div2{
        background-color: blue;
    }
	#div3{
		background: pink;
		top:0;
		left:120px;
		position: relative;
	}
	#div4{
		background: darkorange;
	}
	.box{
		background-color: orange !important;
	}

</style>
</head>
<body>
	
<ol>
	<h3>stop()以及finish()的使用</h3>
	<li>$("#div").stop();//停止当前动画，继续下一个动画 </li>

	<li>$("#div").stop(true);//清除元素的所有动画   </li> 

	<li>$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画</li>

	<li>$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态</li>

	<li>$("#div").finish();//清除元素的所有动画，将所有动画直接到达末状态</li>
	
</ol>



	<div id="div1">div1</div>
	<div id="div2">div2</div>
	<div id="div3">div3</div>
	<button>添加</button>
	<button>删减</button>
<br><br>
	<button id="timeBtn">delay等待函数</button>

	<h3 id="timeH3">60</h3>
	<div id="div4">div4</div>

<script type="text/javascript">
	
$(function(){

	$("#div1").hover(

	function(){
		$("#div2").stop(true).animate({
			width:300,
			height:300,
			opcity:0.3
		},1000,"easeOutBounce" )//
	},
	function(){
		$("#div2").stop(true).animate({
			width:200,
			height:200,
			opcity:1
		},1000,"easeOutBack" )
	   }
	)
    

	$("#div3").click(function(){
		$(this).animate({
			top:300
		},2000,"easeOutElastic")
	})

	$("button").eq(0).click(function(){
		$("#div1").addClass("box",2000)
	})
	$("button").eq(1).click(function(){
		$("#div1").removeClass("box")
	})

	$("button").eq(2).click(function(){
		$("#div4").delay(1000).html("等待1s后动画将会执行").animate({
			width:200,height:200
		})
	})


	var timea =59
	var time = parseInt(timea)
	
	window.setInterval(yourfunction, 1000)//定时器，每隔1秒使用这个方法
	function yourfunction() { 
		$("#timeH3").html(time)
		time--
	 }




}) 
</script>


</body>
</html>